<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.2.7.0.js"></script>
    <style type=>
        .div {
            margin-left: 5px;
            margin-top: 5px;
            border-top: 1px solid blue;
            border-right: 1px dashed green;
            border-bottom: 1px dotted yellow;
            border-left: 1px double pink;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        li {
            display: inline-block;
            margin-right: 10px;
        }

        .active {
            width: 100px;
            height: 100px;
            background: red;
        }

        .text-danger {
            background: green;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="div">
        <p>{{ message }}</p>
        <p>{{ message | uppercase }}</p>
        <p>{{ message | reverse | uppercase }}</p>
        <h3 v-if="Math.random() > 0.7">feel good</h3>
        <h3 v-else-if="Math.random() > 0.5">not bad</h3>
        <h3 v-else>badly</h3>
        <h2 v-show="ok">ok</h2>
        <h2 v-show="!ok">oj8k</h2>
    </div>
    <div class="div">
        <ul>
            <li v-for="value in object">{{ value }}</li>
        </ul>
        <ul>
            <li v-for="value in 10">{{ value }}</li>
        </ul>
        <button @click="counter++" style="font-size:25px;">点我+1 ({{counter}})</button>
    </div>
    <div class="div">
        <div v-bind:class="{ active: isActive}">active</div>
    </div>
    <div class="div">
        <div v-bind:class="{ active: isActive,'text-danger': hasError}">active innerline</div>
    </div>
    <div class="div">
        <div v-bind:class="classObject">active {}</div>
    </div>
    <div class="div">
        <div v-bind:class="[activeClass,hasError ? errorClass : '']">active []</div>
    </div>
    <div class="div">
        <div v-bind:style="{fontSize: fontSize +'px', color: fontColor, background:'black'}">active []</div>
    </div>
    <div class="div">
        <div v-bind:style="styleObject">v-bind:style='styleObject'</div>
    </div>
    <div class="div">
        <div v-bind:style="[classObject,styleObject]">v-bind:style 多个style</div>
    </div>
    <div class="div">
        <button v-on:click="counter += 1">点我+1 ({{counter}})</button>
    </div>
    <div class="div">
        <p v-on:click="reverseMessage">{{ message }}</p>
    </div>
</div>
<script>
    Vue.filter('reverse', function (value) {
        return value.split('').reverse().join('')
    })
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'vue test2',
            ok: true,
            counter: 1,
            isActive: true,
            hasError: true,
            object: {
                name: '张三',
                age: 21,
                slogan: '法外狂徒就是我',
                Vue: 'https://unpkg.com/vue@3.4.38/dist/vue.global.js'
            },
            classObject: {active: true, 'text-danger': false},
            activeClass: 'active',
            errorClass: 'text-danger',
            fontSize: 30,
            fontColor: 'purple',
            styleObject: {
                color: 'red',
                fontSize: '30px',
            }
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('')
            },
        },
    })
    vm.$watch('counter', function (nVal, oVal) {
        console.log('nVale:', nVal, ' oVal:', oVal)
    })
</script>
</body>
</html>